<template>
  <div>姓名：{{ username }}</div>
  <div>年龄{{ age }}<i @click="addone" class="ml-10px">长大一岁{{ one }}</i></div>
  <div>喜欢{{ like }}</div>
  <div v-for="(item, i) in hobby" :key="item.id">爱好{{ i + 1 }}{{ item.name }}</div>
  <i @click="asyncGet" class="ml-10px">异步返回值--({{ two }})--</i>
</template>


<script setup lang="ts">
import {
  ref,
  onMounted,
} from 'vue'
//引入仓库
// import useUserInfoStore from "@/stores/modules/useUserInfoStore"; 
import { useUserInfoStore } from '@/stores/index.ts'
import { storeToRefs } from "pinia"; // 引入pinia转换，store是个reactive对象，跟props一样解构失去响应式。
const userInfoStore = useUserInfoStore(); // Store在它被使用之前是不会创建的，我们可以通过调用use函数来使用Store

let { username, age, like, hobby } = storeToRefs(userInfoStore);

let one = ref()
let two = ref('')
// 替换
const state = () => {
  userInfoStore.$state = {
    name: '狗子',
    age: '22',
    like: 'boy',
    obj: { money: 10, friend: 1 }
  }
}
// 重置
const reset = () => {
  userInfoStore.$reset()
}
// 访问和修改
const addone = () => {
  console.log(userInfoStore, '仓库');
  // 通过storeToRefs响应式数据修改
  // age.value += 1
  // 通过$patch()修改数据
  // userInfoStore.$patch((state) => {
  //   age.value += 1
  // })
  // 通过对象访问getters属性
  // one.value = userInfoStore.addOneAge

  // 通过对象访问actions同步方法
  one.value = userInfoStore.addAge(1)

}
// 调用
const asyncGet = async () => {
  // 通过对象访问actions异步方法
  two.value = await userInfoStore.getList()

}

</script>


<style lang="scss" scoped></style>